<template>
  <div class="merchant-settled combground">
    <div class="container">
      <div class="comtitle">
        <h2 class="comh2">商家入驻申请</h2>
      </div>
      <div class="content">
        <div class="step">
          <m-step :steps="steps" :active="active" />
        </div>
        <div class="step-content">
          <component
            :formData="formData"
            ref="component"
            :is="activeComponent"
          />
        </div>
        <div class="btns">
          <m-button
            v-if="[1, 2].includes(this.active)"
            width="235"
            type="bordered"
            style="margin-right: 15px;"
            @click="prev"
            >上一步</m-button
          >
          <m-button
            v-if="[0, 1].includes(this.active)"
            width="235"
            style="margin-right: 15px;"
            @click="validate()"
            >下一步</m-button
          >
          <m-button
            v-if="active === 2"
            width="235"
            style="margin-right: 15px;"
            @click="submit"
            >提交</m-button
          >
          <m-button v-if="active === 3" width="235" @click="toHome">去首页逛逛</m-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MStep from "@/components/common/m-step/MStep";
import StepOne from "./children/StepOne";
import StepTwo from "./children/StepTwo";
import StepThree from "./children/StepThree";
import StepFour from "./children/StepFour";
import MButton from "@/components/common/m-button/MButton";
import { replyMerchant } from "@/request/api";

export default {
  name: "MerchantSettled",
  components: { MButton, StepOne, StepTwo, StepThree, StepFour, MStep },
  data() {
    return {
      steps: [
        { title: "填写基本信息" },
        { title: "选择企业类型" },
        { title: "选择产品类型" },
        { title: "提交成功" }
      ],
      active: 0,
      formData: {
        mer_name: '',
        mer_name_en: '',
        country: '',
        province: '',
        city: '',
        address: '',
        name: '',
        phone: '',
        position_str: '',
        mer_nature: 0,
        mer_type: 0,
        country: "中国",
        type_1_list: [],
        type_2_list: []
      },
      activeComponent: 'StepOne',
      settlement: {}
    };
  },
  watch: {
    active(val) {
      if (val === 0) {
        this.activeComponent = 'StepOne';
      } else if (val === 1) {
        this.activeComponent = 'StepTwo';
      } else if (val === 2) {
        this.activeComponent = 'StepThree';
      } else if (val === 3) {
        this.activeComponent = 'StepFour';
      }
    },
    "formData.mer_type": {
      handler: function(val) {
        this.formData.type_1_list = [];
        this.formData.type_2_list = [];
      }
    }
  },
  methods: {
    validate() {
      if (this.activeComponent == "StepOne") {
        this.$refs.component.$refs.form.$children[0].validate(res => {
          if (res) this.next();
        });
      } else if (this.activeComponent == "StepTwo") {
        this.next();
      } else if (this.activeComponent == "StepThree") {
        this.next();
      }
    },
    prev() {
      this.active -= 1;
    },
    next() {
      this.active += 1;
    },
    submit() {
      let that = this;
      if (this.checkLast()) {
        this.formData.type_1_list = this.$common.arrToString(
          this.formData.type_1_list
        );
        this.formData.type_2_list = this.$common.arrToString(
          this.formData.type_2_list
        );
        let arr = this.formData.type_1_list + "," + this.formData.type_2_list;
        this.$toastVant.loading("提交中");
        replyMerchant({ ...this.formData, merchant_category_id: arr }).then(
          () => {
            setTimeout(function() {
              that.$toastVant.clear();
              that.active += 1;
            }, 500);
          }
        );
      }
    },
    checkLast() {
      // 0材料 1服务 2全有
      if (
        (this.formData.mer_type == 0 || this.formData.mer_type == 2) &&
        this.formData.type_1_list.length == 0
      ) {
        this.$toastVant("包装一级分类至少选择一个");
        return false;
      } else if (
        (this.formData.mer_type == 1 || this.formData.mer_type == 2) &&
        this.formData.type_2_list.length == 0
      ) {
        this.$toastVant("服务一级分类至少选择一个");
        return false;
      }
      if (!this.formData.agreement) {
        this.$toastVant("请阅读并同意商家入驻规则！");
        return false;
      }
      return true;
    },
    toHome() {
      this.$router.push({ path: "/home" });
    }
  },
  // 页面离开时初始化data清空表单
  beforeRouteLeave(to, from, next) {
    Object.assign(this.$data, this.$options.data());
    next();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-form-item {
  margin-left: -28px;
}
/deep/ .el-form-item__content {
  margin-right: -100px;
}
.merchant-settled {
  padding: 60px 0 80px 0;

  .content {
    width: 100%;
    padding: 65px 180px 85px 170px;
    color: #656565;
    background: #fff;
    margin-top: 50px;
    font-size: 16px;

    .step {
      margin-bottom: 90px;
    }

    .step-content {
      display: flex;
      justify-content: center;
      margin-bottom: 80px;
    }

    .btns {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
